import { TextButton } from './index';
import { Canvas, ArgsTable } from '@storybook/addon-docs';
import { ThemeToggle } from '../../stories/theme-toggle';
import { DownloadOutlined } from '@apitable/icons';

<Meta title="基础组件/Button 按钮/TextButton 文本按钮/文档" />

# TextButton 文本按钮

## 使用方式

```jsx
import { TextButton } from '@apitable/components';
```
 
## 默认按钮

<Canvas>
<ThemeToggle>
  <TextButton>文本按钮</TextButton>
</ThemeToggle>
</Canvas>

## 前后缀图标

<Canvas>
<ThemeToggle>
  <TextButton prefixIcon={<DownloadOutlined />}>文本按钮</TextButton>
  <TextButton suffixIcon={<DownloadOutlined />}>文本按钮</TextButton>
</ThemeToggle>
</Canvas>

## 不同颜色

<Canvas>
<ThemeToggle>
  <TextButton>文本按钮</TextButton>
  <TextButton color="primary">文本按钮</TextButton>
  <TextButton color="danger">文本按钮</TextButton>
</ThemeToggle>
</Canvas>

## 不同大小

<Canvas>
<ThemeToggle>
  <TextButton size="small" color="primary"> 文本按钮 </TextButton>
  <TextButton size="middle" color="primary"> 文本按钮 </TextButton>
  <TextButton size="large" color="primary"> 文本按钮 </TextButton>
</ThemeToggle>
</Canvas>

## 禁用

<Canvas>
<ThemeToggle>
  <TextButton disabled>文本按钮</TextButton>
  <TextButton disabled color="primary"> 文本按钮 </TextButton>
  <TextButton disabled color="danger"> 文本按钮 </TextButton>
</ThemeToggle>
</Canvas>

## 占满容器宽度

<Canvas>
<ThemeToggle>
  <TextButton block>文本按钮</TextButton>
</ThemeToggle>
</Canvas>

## API

<ArgsTable of={TextButton} />
